import React from 'react'
import { Modal, Button, Form, Input } from 'antd'

const FormItem = Form.Item

const OrganizationForm = ({
                            onOk, parentItem, item, form: {
    getFieldDecorator,
    validateFields,
  }, ...modalProps
                          }) => {
  const formItemLayout = {
    labelCol: {
      xs: {span: 8, offset: 0},
      sm: {span: 8, offset: 0},
    },
    wrapperCol: {
      xs: {span: 8, offset: 0},
      sm: {span: 8, offset: 0},
    },
  }

  const onSubmit = (e) => {
    e.preventDefault()
    validateFields((err, values) => {
      if (!err) {
        onOk(values)
      }
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: onSubmit,
  }

  /** @namespace item.name 配置名称*/
  /** @namespace item.configure 配置项*/
  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <FormItem {...formItemLayout} label="名称">
          {item.name}
        </FormItem>

        <FormItem {...formItemLayout}>
          {getFieldDecorator('name', {
            initialValue: item.name,
          })(<Input type='hidden'/>)}
        </FormItem>

        <FormItem {...formItemLayout} hasFeedback label="配置项">
          {getFieldDecorator('configure', {
            rules: [{required: true, message: '配置项必须填写!'}],
            initialValue: item.configure,
          })(<Input.TextArea autosize={true}/>)}
        </FormItem>
      </Form>
    </Modal>
  )
}

export default Form.create()(OrganizationForm)
